﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>网络设置</title>
    <link rel="stylesheet" type="text/css" media="all" href="style.css"/>
    <link rel="stylesheet" type="text/css" href="style/css/media-queries.css"/>
    <link rel="stylesheet" type="text/css" href="style/js/player/mediaelementplayer.css"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300italic,300,700,700italic|Open+Sans+Condensed:300,700'
          rel="stylesheet" type='text/css'>
    <link rel="stylesheet" href="css/jquery-labelauty.css">
    <!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="style/css/ie8.css" media="all"/>
    <![endif]-->
    <!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="style/css/ie9.css" media="all"/>
    <![endif]-->
    <script type="text/javascript" src="style/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="style/js/ddsmoothmenu.js"></script>
    <script type="text/javascript" src="style/js/retina.js"></script>
    <script type="text/javascript" src="style/js/selectnav.js"></script>
    <script type="text/javascript" src="style/js/jquery.masonry.min.js"></script>
    <script type="text/javascript" src="style/js/jquery.fitvids.js"></script>
    <script type="text/javascript" src="style/js/jquery.backstretch.min.js"></script>
    <script type="text/javascript" src="style/js/mediaelement.min.js"></script>
    <script type="text/javascript" src="style/js/mediaelementplayer.min.js"></script>
    <script type="text/javascript" src="style/js/jquery.dcflickr.1.0.js"></script>
    <script type="text/javascript" src="style/js/twitter.min.js"></script>

    <!-- the network settings js -->
    <script type="text/javascript" src="js/network_settings.js"></script>
    <!-- the logout js -->
    <script type="text/javascript" src="js/logout.js"></script>

    <script type="text/javascript">
        $.backstretch("style/images/bg/1.jpg");
    </script>

    <style>
        ul {
            list-style-type: none;
        }

        li {
            display: inline-block;
        }

        li {
            margin: 10px 0;
        }

        input.labelauty + label {
            font: 12px "Microsoft Yahei";
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#dhcp").click(function () {
                $("#objPage > .div-item").css("visibility", "hidden");
                $("#objPage > .div-item").css("display", "none");
                $("#objPage > #div1").css("visibility", "visible");
                $("#objPage > #div1").css("display", "block");
            });
            $("#static_ip").click(function () {
                $("#objPage > .div-item").css("visibility", "hidden");
                $("#objPage > .div-item").css("display", "none");
                $("#objPage > #div2").css("visibility", "visible");
                $("#objPage > #div2").css("display", "block");
            });
            $("#pppoe").click(function () {
                $("#objPage > .div-item").css("visibility", "hidden");
                $("#objPage > .div-item").css("display", "none");
                $("#objPage > #div3").css("visibility", "visible");
                $("#objPage > #div3").css("display", "block");
            });
        });
    </script>

    <script id="clientEventHandlersJS" language="javascript">
        //<!--
        function T1_onkeyup() {
            if (document.card.T1.value.length == 3) {
                document.card.T2.focus();
            }
        }
        function T2_onkeyup() {
            if (document.card.T2.value.length == 3) {
                document.card.T3.focus();
            }
        }

        function T3_onkeyup() {
            if (document.card.T3.value.length == 3) {
                document.card.T4.focus();
            }
        }
        //-->
    </script>
</head>
<body onload="networkSettings_data_binding()">
<div class="scanlines"></div>

<!-- Begin Header -->
<div class="header-wrapper opacity">
    <div class="header">
        <!-- Begin Logo -->
        <div class="logo">
            <a href="index.html">
                <img src="images/11.png" alt=""/>
            </a>
        </div>
        <!-- End Logo -->
        <!-- Begin Menu -->
        <div id="menu-wrapper">
            <div id="menu" class="menu">
                <ul id="tiny">
                    <li>
                        <a href="status.html">路由状态</a>
                    </li>
                    <li>
                        <a class="active" href="#">系统设置</a>
                        <ul>
                            <li><a href="wifi_auth.html">关闭路由认证</a></li>
                            <li><a href="modify.html">修改密码</a></li>
                            <li><a href="reset.html">恢复出厂设置</a></li>
                            <li><a href="reboot.html">重启</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">网络设置</a>
                        <ul>
                            <li><a href="typography.html">上网设置</a></li>
                            <li><a href="wifi.html">无线设置</a></li>
                        </ul>
                    </li>
                    <li style="margin-left:80px;"><a href="#">lin</a></li>
                    <li><input type="button"
                               style="background-color:#ffffff; border-radius:10px; width:60px;height:19px; color:#39accb; cursor: pointer"
                               value="退出" onclick="logout()"/></li>
                </ul>
            </div>
        </div>
        <div class="clear"></div>
        <!-- End Menu -->
    </div>
</div>
<!-- End Header -->

<!-- Begin Wrapper -->
<div class="wrapper"><!-- Begin Intro -->
    <!-- Begin Container -->
    <div style="margin-bottom:20px;">
        <img style="width:70px; margin-left:auto; margin-right:auto" src="images/22.png">

        <p style="color:#000000; font-size:15px; font-weight:600; width:70px; margin-left:auto; margin-right:auto">
            网络设置 </p>
    </div>
    <div style="background-color: rgba(232, 232, 232, 0.21);
                    border-radius: 25px;
                    color: #fff;
                    font-weight: 300;
                    max-width: 888px;
                    padding: 0 30px 30px 30px;
                    margin: 30px auto 0 auto;">
        <div style="padding-top:20px; margin-left:10px;">
            <p style="font-size:14px; font-weight:600; float:left;">上 网 设 置 <a id="network_type"style="color:#fefac7;">---</a>
            </p>
            <input type="button" id="submit_button" value="提交更改" onclick="networkSettings_data_post();"
                   style="width:150px; height:100%;margin-left:70%;cursor: pointer;"/>
        </div>
        <hr style="margin-top:20px;"/>
        <div>
            <ul style="text-align: -webkit-center;">
                <li><input type="radio" name="radio" id="dhcp" data-labelauty="DHCP 客户端"></li>
                <li><input type="radio" name="radio" id="static_ip" data-labelauty=" 静态 IP 地址"></li>
                <li><input type="radio" name="radio" id="pppoe" data-labelauty=" PPPoE 拨号"></li>
            </ul>
        </div>
        <div id="objPage">
            <!--<div id="div1" class="div-item" style="width:100px;height:100px;background-color:#0ff;visibility:hidden;display:none"></div>-->
            <div id="div2" class="div-item" style="visibility:hidden;display:none;text-align: -webkit-center;">
                <form method="POST" name="card" style="margin-bottom:20px;">
                    I P &emsp; 地 址：
                    <input type="text" id="ip1" name="T1" size="4" maxlength="4" language="javascript"
                           onkeyup="return T1_onkeyup()" style="margin-top:30px; width:5%">.
                    <input type="text" id="ip2" name="T2" size="4" maxlength="4" language="javascript"
                           onkeyup="return T2_onkeyup()" style="width:5%">.
                    <input type="text" id="ip3" name="T3" size="4" maxlength="4" language="javascript"
                           onkeyup="return T3_onkeyup()" style="width:5%">.
                    <input type="text" id="ip4" name="T4" size="4" maxlength="4" style="width:5%">
                </form>
                <form method="POST" name="card" style="margin-bottom:20px;">
                    子 网 掩 码：
                    <input type="text" id="netmask1" name="T1" size="4" maxlength="4" language="javascript"
                           onkeyup="return T1_onkeyup()" style="width:5%">.
                    <input type="text" id="netmask2" name="T2" size="4" maxlength="4" language="javascript"
                           onkeyup="return T2_onkeyup()" style="width:5%">.
                    <input type="text" id="netmask3" name="T3" size="4" maxlength="4" language="javascript"
                           onkeyup="return T3_onkeyup()" style="width:5%">.
                    <input type="text" id="netmask4" name="T4" size="4" maxlength="4" style="width:5%">
                </form>
                <form method="POST" name="card" style="margin-bottom:20px;">
                    默 认 网 关：
                    <input type="text" id="gateway1" name="T1" size="4" maxlength="4" language="javascript"
                           onkeyup="return T1_onkeyup()" style="width:5%">.
                    <input type="text" id="gateway2" name="T2" size="4" maxlength="4" language="javascript"
                           onkeyup="return T2_onkeyup()" style="width:5%">.
                    <input type="text" id="gateway3" name="T3" size="4" maxlength="4" language="javascript"
                           onkeyup="return T3_onkeyup()" style="width:5%">.
                    <input type="text" id="gateway4" name="T4" size="4" maxlength="4" style="width:5%">
                </form>
                <form method="POST" name="card" style="margin-bottom:50px;">
                    DNS服务器：
                    <input type="text" id="dns1" name="T1" size="4" maxlength="4" language="javascript"
                           onkeyup="return T1_onkeyup()" style="width:5%">.
                    <input type="text" id="dns2" name="T2" size="4" maxlength="4" language="javascript"
                           onkeyup="return T2_onkeyup()" style="width:5%">.
                    <input type="text" id="dns3" name="T3" size="4" maxlength="4" language="javascript"
                           onkeyup="return T3_onkeyup()" style="width:5%">.
                    <input type="text" id="dns4" name="T4" size="4" maxlength="4" style="width:5%">
                </form>

            </div>
            <div id="div3" class="div-item"
                 style="text-align: -webkit-center;height:100%;visibility:hidden;display:none;">

                <form method="POST" style="margin-bottom:50px;">
                    账 号:
                    <input type="text" id="pppoe_username" name="firstname"
                           style="margin-top:30px; margin-bottom:30px;width:15%"/>
                    <br/>
                    密 码:
                    <input type="text" id="pppoe_password" name="lastname" style="margin-bottom:20px;width:15%"/>
                </form>
            </div>
        </div>


    </div>
    <!-- End Container -->

</div>
<!-- End Wrapper -->
<!-- End Footer -->
<script src="js/jquery-labelauty.js"></script>
<script>
    $(function () {
        $(':input').labelauty();
    });
</script>
<script type="text/javascript" src="style/js/scripts.js"></script>
</body>
</html>